<template>
  <el-row :gutter=24>
    <el-col :span="24">
      <el-card class="page-header" shadow="never">
<!--        <div slot="header">-->
<!--          <span>财务数据端</span>-->
<!--        </div>-->
        <el-col
          :span="6"
          v-for="(item, index) in btnList"
          :key="index"
          style="padding-bottom: 24px"
        >
          <div class="bg-one btn" v-if="userInfo.user_type == 1" @click="handlePage(item.href)">
            <el-image :src="item.url"></el-image>
            <p class="btn-title">{{item.title}}</p>
            <p class="btn-cont">{{item.value}}</p>
          </div>
          <div class="bg-one btn" v-else-if="userInfo.user_type == 2" @click="handlePage(item.href2)">
            <el-image :src="item.url"></el-image>
            <p class="btn-title">{{item.title}}</p>
            <p class="btn-cont">{{item.value}}</p>
          </div>
        </el-col>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  import {getStaticUserInfo} from '@/utils/user'

  export default {
    props: {
      indexData: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data() {
      return {
        str: 'dc_cw',
        userInfo: getStaticUserInfo(),
        info: {
          dns: {
            index: 1,
            href:'/paymentCheck',
            href2:'/dcPaymentCheck',
            url: require('@/assets/index_images/dns.png'),
            title: '待内审(项）',
          },
          dgdhd: {
            index: 2,
            href:'/activity',
            href2:'/project',
            url: require('@/assets/index_images/dgdxm.png'), //dgdhd.png
            title: '待归档项目(场）',
          },
          dgdxm: {
            index: 3,
            href:'',
            href2:'',
            url: require('@/assets/index_images/dgdxm.png'),
            title: '待归档项目(项）',
          },
          zhye: {
            index: 4,
            href:'',
            href2:'',
            url: require('@/assets/index_images/zhye.png'),
            title: '账户余额(元）',
          },
          dtj: {
            index: 5,
            href:'',
            href2:'',
            url: require('@/assets/index_images/dtj.png'),
            title: '待提交(元）',
          },
          bzjye: {
            index: 6,
            href:'',
            href2:'',
            url: require('@/assets/index_images/bzjye.png'),
            title: '保证金余额(元）',
          },
          nsbh: {
            index: 7,
            href:'/paymentPending',
            href2:'/dcPaymentPending',
            url: require('@/assets/index_images/nsbh.png'),
            title: '内审驳回(项）',
          },
          zsbh: {
            index: 9,
            href:'/paymentCheck',
            href2:'/dcPaymentCheck',
            url: require('@/assets/index_images/zsbh.png'),
            title: '总审驳回(项）',
          },
          /*fl: {
            index: 10,
            href:'',
            href2:'',
            url: require('@/assets/index_images/fl.png'),
            title: '费率',
          },*/
        },
        btnList: [],
        description:
          '共享经济下，产业链条内的灵活用工新模式。随充随付，资金一键秒到账，降低企业运营成本。',
      }
    },

    watch: {
      indexData: {
        deep: true,
        handler: function (newVal) {
          this.btnList = [];
          let key1 = Object.keys(newVal)
          let key2 = Object.keys(this.info)
          let val = key1.filter((re)=> key2.includes(re))
          console.log(key1)
          console.log(key2)
          console.log(val)
          let arr = []
          for (let key of val) {
            let a = {
              ...this.info[key],
              value: newVal[key]
            }
            if(this.userInfo.user_type == 1 && key == 'dgdxm') {
              a.title = this.info.dgdhd.title
              a.url = this.info.dgdhd.url
            }
            arr.push(a)
          }
          this.btnList = arr.sort((a, b) => a.index - b.index)
        }
      }
    },

    methods: {
      handlePage(row) {
        this.$router.push({ path: row })
      },
      handleTips() {
        const hour = new Date().getHours()
        return hour < 8
          ? `早上好 ${this.username}，又是元气满满的一天。`
          : hour <= 11
            ? `上午好 ${this.username}，看到你我好开心。`
            : hour <= 13
              ? `中午好 ${this.username}，忙碌了一上午，记得吃午饭哦。`
              : hour < 18
                ? `下午好 ${this.username}，你一定有些累了，喝杯咖啡提提神。`
                : `晚上好 ${this.username}，愿你天黑有灯，下雨有伞。`
      },
    },
  }
</script>

<style lang="scss" scoped>
  p {
    margin: 0;
  }

  .page-header {
    min-height: 145px;
    transition: $base-transition;

    .btn {
      position: relative;
      box-sizing: border-box;
      overflow: hidden;
      width: 100%;

      font-size: 20px;
      color: #fff;
      background-repeat: no-repeat;
      background-size: 100%;

      &-title {
        position: absolute;
        top: 30%;
        left: 20px;
        font-size: 1vw;
        line-height: 1vw;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        z-index: 2;
      }

      &-cont {
        position: absolute;
        top: 50%;
        left: 20px;
        font-size: 1.5vw;
        line-height: 1.5vw;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        z-index: 2;
      }
    }

    .btn:last-child {
      margin-right: 0;
    }

    ::v-deep {
      * {
        transition: $base-transition;
      }

      .el-card__body {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
    }

    &-avatar {
      width: 60px;
      height: 60px;
      margin-right: 20px;
      border-radius: 50%;
    }

    &-tip {
      flex: auto;
      width: calc(100% - 200px);
      min-width: 300px;

      &-title {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: bold;
        color: #3c4a54;
      }

      &-description {
        font-size: $base-font-size-default;
        color: #808695;
      }
    }

    &-avatar-list {
      flex: 1;
      min-width: 100px;
      margin-left: 20px;
      text-align: right;

      p {
        margin-right: 9px;
        line-height: 0px;
      }
    }
  }
</style>
